<template>
  <BaseModal ref="modalRef" @on-modal-cancel="modalCancel" @on-modal-ok="modalOK">
    <template #titleArea>交付物 </template>
    <template #contentArea>
      <div style="text-align: right">
        <a-range-picker v-model:value="data.name" placeholder="请输入开始时间" />&ensp;&ensp;
        <a-input-search v-model:value="value1" placeholder="请输入交付物名称" style="width: 200px" @search="onSearch" />
      </div>
      <BaseTablePagination :columns="columns" :scroll="{ x: 0 }" :toolbar="{ isTabbar: false }" :table-data="tableData">
        <template #actionColumn="{ scope }">
          <a-button type="link" @click.stop="onDetails(scope.row)">详情</a-button>
        </template>
      </BaseTablePagination>
    </template>
  </BaseModal>
</template>

<script setup lang="ts">
import BaseModal from "@/components/Basics/BaseModal.vue"
import BaseTablePagination from "@/components/Basics/BaseTablePagination.vue"
const modalRef = ref()
const showModal = (): void => {
  modalRef.value.setOpen()
}
const modalOK = () => {
  modalRef.value.setCloes()
}
const modalCancel = () => {
  modalRef.value.setCloes()
}
const value3 = ref()
const value1 = ref()
const onSearch = (searchValue: string) => {
  console.log("use value", searchValue)
}
interface dataType {
  id: number
  name: string
  creator: string
  statusText: string
  owner: string
  os: string
  [props: string]: any
}
const data: dataType = {
  id: 1,
  name: "x",
  creator: "x",
  statusText: "x",
  owner: "x",
  os: "x",
}
const columns = reactive([
  { title: "交付物名称", dataIndex: "id", key: "id" },
  { title: "任务名称", dataIndex: "name", key: "name" },
  { title: "上传者", dataIndex: "creator", key: "creator" },
  { title: "文件类型", dataIndex: "statusText", key: "statusText" },
  { title: "文件大小", dataIndex: "owner", key: "owner" },
  { title: "上传时间", dataIndex: "os", key: "os" },
  { title: "操作", dataIndex: "action", key: "action" },
])
const tableData = reactive([])
const onDetails = (row: any) => {
  console.log(row)
}
defineExpose({
  showModal,
})
</script>
<style scoped lang="less">
.contents-list {
  flex: 1 1 50%;
  padding: 0 10px;
  border-right: 1px solid #e8e8e8;
  .layout-checklist__title {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.47;
  }
  .layout-checklist-list {
    // overflow-y: scroll;
    max-height: 40vh;
    &::-webkit-scrollbar {
      width: 0;
    }
  }
}
.contents-checked {
  flex: 1 1 50%;
  padding: 0px 10px;
  .layout-checklist__title {
    .layout-checklist__title_span {
      color: #909090;
    }
  }
  .layout-checklist-list {
    // overflow-y: scroll;
    max-height: 40vh;

    &::-webkit-scrollbar {
      width: 0;
    }
  }
}
</style>
<style scoped>
:deep(.ant-checkbox-wrapper) {
  display: flex;
  margin-left: 0;
}
</style>
